<template>
  <div class="tabs-container">
    <div class="scroll" >
      <div class="tabs">
        <div
          class="tab"
          v-for="(item, index) in tabsData"
          :key="index"
          :class="{ active: activeIndex === index }"
          @click="handleItemClick(index)"
        >
          <span>{{Argument +":"+ item }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>


export default {
  name: 'KTab',
  props: {
    tabsData: {
      type: Array,
      default: () => [],
      required: true,
    }, // 导航项
    modelValue: {
      type: Number,
      default: 0,
    }, // v-model 绑定的值
    Argument:{
      type:String,
      default:""
    },
  },
  mounted() {
    console.log("this.tabsData",this.tabsData)
    this.activeIndex = this.modelValue

  },
  beforeMount() {

  },
  data() {
    return {
      activeIndex: 0,
    }
  },
  methods: {
    handleItemClick(index) {
      this.activeIndex = index
      console.log("activeIndex:",this.activeIndex)
      this.$emit('update:modelValue', this.activeIndex);
      this.$emit('clickUpdata', index)

    },
  },
}
</script>

<style scoped lang="scss">
.tabs-container {
  z-index: 10;
  height: 100%;
  box-sizing: border-box;

  .scroll {
    width: 100%;
    //overflow: scroll;
    overflow-x: auto;
    .tabs {

      width: 99%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 40px;
      padding: 0 20px;
      box-sizing: border-box;
    }
  }
}

.tab-content {
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 43px 20px;
}

.tab {

  margin-right: 42px;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: #000000;
  white-space: nowrap;

  &:nth-last-child(1) {
    margin-right: 0 !important;
  }
}
.tab:hover{
  cursor: pointer;
}

.tab.active {
  position: relative;
  font-weight: 500;
  color: #409EFF;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: -11px;
  left: calc(50% - 11px);
  width: 15.41px;
  height: 4px;
  border-radius: 3px;
  background: #409EFF;
}
</style>
